<template>
  <el-dialog
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    width="950px"
  >
    <template slot="title">
      <!-- <img src="@/assets/logo-min.png" alt=""> -->
      <span>{{ dialogTitle }}</span>
    </template>
    <searchHeader 
      ref="searchHeader"
      :formDisabled="formDisabled"
    ></searchHeader>
    
    <fieldSelect
      ref="fieldSelect"
      :formDisabled="formDisabled"
      :operateType="operateType"
    ></fieldSelect>

    <div class="dialog-footer" slot="footer">
      <el-button  @click="handleClose">关闭</el-button>
      <el-button class="query-btn" @click="handleSave">下一步</el-button>
    </div>
  </el-dialog>
</template>

<script>
import searchHeader from './searchHeader.vue';
import fieldSelect from './fieldSelect.vue'

export default {
  components: {
    searchHeader,
    fieldSelect,
  },
  data() {
    return {
      visible: false,
      formDisabled: false, // 表单 和 穿梭框 是否可编辑
      operateType: '',
      row: {},
      listData: [
        {
          label: '姓名',
          value: 'name',
          selected: false,
        },
        {
          label: '年龄',
          value: 'age',
          selected: false,
        },
        {
          label: '性别',
          value: 'gender',
          selected: false,
        },
        {
          label: '手机号',
          value: 'phone',
          selected: false,
        },
        {
          label: '创建时间',
          value: 'createTime',
          selected: true,
        },
        {
          label: '更新时间',
          value: 'updateTime',
          selected: true,
        },
      ],
      fieldList: [],
      selectedFieldList: [],

    }
  },
  computed: {
    dialogTitle() {
      if (this.operateType === 'Add') {
        return '新增报表'
      } else if (this.operateType === 'Modify') {
        return '修改报表'
      } else if (this.operateType === 'view') {
        return '查看报表'
      }
    }
  },

  methods: {
    handleClose() {
      this.visible = false;
      this.$refs.searchHeader.resetForm();
      this.$refs.fieldSelect.resetForm();
    },
    handleOpen(val) {
      this.visible = true;
      this.operateType = val.operateType;
      if (val.operateType === 'view') {
        this.formDisabled = true;
      } else {
        this.formDisabled = false;
      }
      this.queryData();
      // 获取可选字段 与 已选字段
      this.$nextTick(() => {
        // 通过接口获取 可选字段 与 已选字段，需给出选中状态字段值 
        this.$refs.fieldSelect.fieldList = this.fieldList;
        this.$refs.fieldSelect.selectedFieldList = this.selectedFieldList;
        this.$refs.fieldSelect.selectTotal = this.selectedFieldList.length;

      })
    },
    handleSave() {
      this.$refs.searchHeader.handleValidForm();
      console.log(this.$refs.searchHeader.handleValidForm());
    },
    queryData() {
      this.fieldList = this.listData;
      this.selectedFieldList = this.listData.filter((item) => item.selected);
      // 已被选中的字段，在可选区域中展现为选中状态 checked 为 true
      this.fieldList = this.fieldList.map((item) => {
        return {
          ...item,
          checked: item.selected
        }
      })
      // 已选字段，在已选区域中展现为选中状态 checked 为 false
      this.selectedFieldList.forEach((item) => {
        item.checked = false
      })

    }
  }
}

</script>

<style lang="scss" scoped>

@import '@/assets/styles/newBase.scss';
  ::v-deep .el-dialog__header {
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #F5F7FA;
    padding: 10px 16px !important;
  
    img {
      width: 30px;
      margin: 0 8px 0 0;
    }
  }
  
</style>